<template>
  <qh-page-view :showNavbar="false" bgColor="transparent">
    <view class="fixed-header" :class="{ 'header-scroll': isScrolled }">
      <uni-status-bar></uni-status-bar>
      <view class="search-box flex-cn">
        <view class="navbar-left flex-cn" style="flex: 1; margin-left: 20rpx">
          <text
            :class="{ 'icon-dark': isScrolled }"
            class="qh-rt-single qh-rt-zuo-zuo navbar-back-icon"
            @click="backHome"
          ></text>
           <!-- <view class="navbar-icon" :class="{ 'icon-dark': isScrolled }">
            <view class="icon-container">
              <text :class="{ 'icon-dark1': isScrolled }"  class="qh-rt-single qh-rt-zuo-zuo navbar-back-icon" @click="backHome"></text>
              <text class="divider"></text>
              <text class="qh-rt-single qh-rt-a-zu2432 search-icon navbar-back-icon"  @click="showSearch"></text>
            </view>
          </view> -->
        </view>

        <view class="header-title" :class="{ 'text-dark': isScrolled }">
          {{ title }}
        </view>
        <view style="width: 320rpx; flex: 1"></view>
      </view>
    </view>

    <scroll-view scroll-y @scroll="handleScroll" class="scrol-content">
      <view style="position: relative">
        <view style="position: relative; height: 688rpx">
          <img
            style="position: absolute; height: 688rpx; width: 100%; z-index: 56"
            :src="headerImg"
            alt=""
          />
        </view>

        <view class="obj_bubble-outer">
          <view class="obj_bubble-container">
            <view class="obj_switch-container">
              <view class="obj_bubble-close-img" @tap="handleSwitchChange">
                <text
                  class="feiIconfont icon-gengduo1"
                  style="color: #fff"
                ></text>
              </view>
            </view>

            <view v-if="showBubble" class="obj_bubble-box">
              <view
                class="obj_bubble-content"
                :class="{
                  'obj_bubble-animated': showBubble && !slideOut,
                  'obj_bubble-slide-out': slideOut,
                }"
                :style="bubbleStyle"
                @click.stop
              >
                <view
                  class="obj_bubble-grid"
                  :class="{ 'obj_bubble-grid-two': twoColumns }"
                >
                  <view
                    v-for="(item, index) in customBubbleItems"
                    :key="index"
                    class="obj_bubble-item"
                    :class="{ 'obj_bubble-active': item.active }"
                    @tap="handleBubbleClick(index)"
                  >
                    {{ item.text }}
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
      
      <block v-for="(hotItem, hotIndex) in hot_list" :key="hotIndex">
        <view
          v-if="hotItem.goods_list && hotItem.goods_list.length < 4"
          class="gift-container"
        >
          <view class="gift-item">
            <view class="gift-title-box">
              <image
                class="gift-title-img"
                src="https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/tempImage/1733886656675902c04e15f.png"
                mode="aspectFill"
              ></image>
              <text class="gift-title-text">{{ hotItem.name }}</text>
            </view>
            <view class="gift-content-box">
              <view class="obj-product-list">
                <view
                  class="obj-product-card"
                  v-for="(goodsItem, goodsIndex) in hotItem.goods_list"
                  :key="goodsIndex"
                >
                  <view class="obj-card-content">
                    <view class="obj-product-card-content">
                      <image
                        class="obj-product-image"
                        :src="goodsItem.goods_image"
                        mode="aspectFit"
                      />
                      <view
                        class="obj-product-info"
                        @click="handleBuy(goodsItem)"
                      >
                        <view class="obj-product-title">{{
                          goodsItem.goods_name
                        }}</view>
                        <view class="obj-price-area">
                          <view class="obj-tag-container">
                            <!-- 标签预留位置 -->
                          </view>
                          <view class="obj-bottom-container">
                            <view class="price-container">
                              <image
                                src="https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/tempImage/17338083046757d0b0aba4f.png"
                                mode="aspectFit"
                                style="width: 56px; height: 18px"
                              ></image>
                              <view class="obj-price">
                                <text class="obj-amount"
                                  >¥{{ goodsItem.online_price }}</text
                                >
                                <view
                                  v-if="goodsItem.rebate > 0"
                                  class="temperature-box"
                                >
                                  {{ goodsItem.rebate
                                  }}<text
                                    style="
                                      letter-spacing: 2rpx;
                                      margin-left: 2rpx;
                                    "
                                    >福气值</text
                                  >
                                </view>
                              </view>
                            </view>
                            <view @click="handleBuy(goodsItem)">
                              <buy-button buttonText="立即加购"></buy-button>
                            </view>
                          </view>
                        </view>
                      </view>
                    </view>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>

        <view
          v-if="hotItem.goods_list && hotItem.goods_list.length >= 4"
          class="gift-container-one"
        >
          <view class="gift-item">
            <view class="gift-title-box">
              <image
                class="gift-title-img"
                src="https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/tempImage/1733886656675902c04e15f.png"
                mode="aspectFill"
              ></image>
              <text class="gift-title-text">{{ hotItem.name }}</text>
            </view>
            <view class="gift-content-box-one">
              <view class="gift-content-box-one-item">
                <!-- 排序选项 -->
                <view class="options-container">
                  <view class="options">
                    <view
                      @click="sortBySales(hotItem, hotIndex)"
                      class="option"
                      :class="{
                        active:
                          activeTab === '1' && activeListIndex === hotIndex,
                      }"
                    >
                      <text>销量</text>
                      <view class="triangle-icons">
                        <view
                          class="triangle-icon triangle-icon-up"
                          :class="{
                            active:
                              activeTab === '1' &&
                              isActiveUp &&
                              activeListIndex === hotIndex,
                          }"
                        ></view>
                        <view
                          class="triangle-icon triangle-icon-down"
                          :class="{
                            active:
                              activeTab === '1' &&
                              isActiveDown &&
                              activeListIndex === hotIndex,
                          }"
                        ></view>
                      </view>
                    </view>
                    <view
                      @click="sortByPrice(hotItem, hotIndex)"
                      class="option"
                      :class="{
                        active:
                          activeTab === '2' && activeListIndex === hotIndex,
                      }"
                    >
                      <text>价格</text>
                      <view class="triangle-icons">
                        <view
                          class="triangle-icon triangle-icon-up"
                          :class="{
                            active:
                              activeTab === '2' &&
                              isActiveUp &&
                              activeListIndex === hotIndex,
                          }"
                        ></view>
                        <view
                          class="triangle-icon triangle-icon-down"
                          :class="{
                            active:
                              activeTab === '2' &&
                              isActiveDown &&
                              activeListIndex === hotIndex,
                          }"
                        ></view>
                      </view>
                    </view>
                  </view>
                </view>

                <!-- 商品列表 -->
                <view class="series-product-list">
                  <view
                    class="series-product-card"
                    v-for="(goodsItem, goodsIndex) in hotItem.goods_list"
                    :key="goodsIndex"
                  >
                    <image
                      class="series-product-image"
                      :src="goodsItem.goods_image"
                      mode="aspectFit"
                      @click="handleBuy(goodsItem)"
                    />
                    <view class="series-product-info">
                      <view class="series-product-title">{{
                        goodsItem.goods_name
                      }}</view>
                      <view class="series-price-area">
                        <view class="series-price">
                          <text class="series-amount"
                            >¥{{ goodsItem.online_price }}</text
                          >
                          <view
                            v-if="goodsItem.rebate > 0"
                            class="temperature-box"
                          >
                            {{ goodsItem.rebate
                            }}<text
                              style="letter-spacing: 2rpx; margin-left: 2rpx"
                              >福气值</text
                            >
                          </view>
                        </view>
                        <view>
                          <image
                            @click="handleBuy(goodsItem)"
                            class="series-cart-icon"
                            src="https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/tempImage/1733903326675943de0dea6.png"
                            mode="aspectFit"
                          />
                        </view>
                      </view>
                    </view>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </block>
    </scroll-view>
  </qh-page-view>
</template>

<script>
export default {
  name: "GiftBox",
  data() {
    return {
      headerImg: "",
      isTop: false,
      isScrolled: false,
      title: "新年特惠",
      showBubble: false,
      slideOut: false,
      twoColumns: true,
      offsetTop: "180rpx",
      offsetLeft: "60rpx",
      customBubbleItems: [
        {
          text: "综合礼盒DIY",
          active: false,
          id: "887",
          headerImg:
            "https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/tempImage/1734335054675fda4ea379d.png",
        },
        {
          text: "坚果",
          active: false,
          id: "873",
          headerImg:
            "https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/tempImage/1734331249675fcb712bf51.png",
        },
        {
          text: "海鲜水产",
          active: false,
          id: "874",
          headerImg:
            "https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/tempImage/17345897146763bd1275055.png",
        },
        {
          text: "五谷杂粮",
          active: false,
          id: "875",
          headerImg:
            "https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/tempImage/17345897146763bd122d822.png",
        },
        {
          text: "南北干货",
          active: false,
          id: "876",
          headerImg:
            "https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/tempImage/17345897156763bd1362aa8.png",
        },
        {
          text: "牛羊生鲜",
          active: false,
          id: "877",
          headerImg:
            "https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/tempImage/17345897136763bd11dc009.png",
        },
        {
          text: "厚切牛排",
          active: false,
          id: "878",
          headerImg:
            "https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/tempImage/17345899546763be0271c35.png",
        },
        {
          text: "鸡鸭禽蛋",
          active: false,
          id: "879",
          headerImg:
            "https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/tempImage/1734330823675fc9c7df079.png",
        },
        {
          text: "粮油调味",
          active: false,
          id: "880",
          headerImg:
            "https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/tempImage/17345900166763be40d0c9b.png",
        },
        {
          text: "基地直发水果",
          active: false,
          id: "881",
          headerImg:
            "https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/tempImage/17345900406763be58cc093.png",
        },
        {
          text: "牛奶奶粉",
          active: false,
          id: "882",
          headerImg:
            "https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/tempImage/17345900556763be67cc69b.png",
        },
        {
          text: "酒水饮料",
          active: false,
          id: "883",
          headerImg:
            "https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/tempImage/1735195983676cfd4f66bc8.png",
        },
        {
          text: "零食糕点",
          active: false,
          id: "884",
          headerImg:
            "https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/tempImage/17345900906763be8a200ba.png",
        },
        {
          text: "鲜花饰品",
          active: false,
          id: "885",
          headerImg:
            "https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/tempImage/17345901126763bea07c196.png",
        },
        {
          text: "预制宴席",
          active: false,
          id: "886",
          headerImg:
            "https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/tempImage/17345901396763bebb88f99.png",
        },
        {
          text: "熟食腊味",
          active: false,
          id: "889",
          headerImg:
            "https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/tempImage/17345902046763befc32b9a.png",
        },
        {
          text: "滋补品",
          active: false,
          id: "888",
          headerImg:
            "https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/tempImage/17345902326763bf1845981.png",
        },
        {
          text: "家电专场",
          active: false,
          id: "893",
          headerImg:
            "https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/tempImage/17355668216772a5e548cdf.png",
        },
        {
          text: "农副产品",
          active: false,
          id: "897",
          headerImg:
            "https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/tempImage/173580168267763b5267fd9.png",
        },
      ],
      productList: [],
      testData: "测试",
      activeTab: "",
      isActiveUp: false,
      isActiveDown: false,
      class_id: null,
      hot_list: [],
      activeListIndex: -1,
      isSearchVisible: false,
    };
  },
  computed: {
    styleColor() {
      return `color: ${this.isTop ? "#fff" : "#000"}`;
    },
    bubbleStyle() {
      return {
        position: "absolute",
        top: this.offsetTop,
        left: this.offsetLeft,
        transform: "translate3d(0,0,0)",
        zIndex: 1000,
      };
    },
  },
  methods: {
    async getProductList() {
      console.log(this.class_id, "this.class_id");
      uni.showLoading({
        title: "加载中...",
        mask: true,
      });
      try {
        const res = await this.$request(
          "SmallProgramApi/NewYear/getGiftBoxGoodsList",
          {
            store_id: this.$store.mallStoreId,
            merchant_id: 1,
            class_id: this.class_id,
          }
        );

        // 过滤出 goods_list 度小于等于 4 的数据
        // this.productList = res.data.filter((item) => {
        //   return item.goods_list && item.goods_list.length <= 4;
        // });
        // this.hot_list = res.data.filter((item) => {
        //   return item.goods_list && item.goods_list.length > 4;
        // });

        this.hot_list = res.data;
        console.log(res.data, "this.res.datares.data  ");
        console.log(this.productList, "productList");
      } catch (error) {
        uni.showToast({
          title: "加载失败",
          icon: "none",
        });
        console.log(error);
      } finally {
        uni.hideLoading();
      }
    },

    handleBuy(item) {
      console.log("点击购买:", item);
      // 处理购买逻辑
      uni.navigateTo({
        url: "/pages/mer/goods/details/details?id=" + item.id,
      });
    },
    handleScroll(e) {
      this.isScrolled = e.detail.scrollTop > 20;
    },
    backHome() {
      uni.navigateBack();
    },

    handleSwitchChange() {
      if (!this.showBubble) {
        this.openBubble();
      } else {
        this.closeBubble();
      }
    },
    openBubble() {
      this.showBubble = true;
      this.slideOut = false;
    },
    closeBubble() {
      this.slideOut = true;
      setTimeout(() => {
        this.showBubble = false;
        this.slideOut = false;
      }, 300);
    },
    async handleBubbleClick(index) {
      // 显示loading
      uni.showLoading({
        title: "加载中...",
        mask: true,
      });

      try {
        this.customBubbleItems = this.customBubbleItems.map((item, i) => ({
          ...item,
          active: i === index,
        }));

        const activeItem = this.customBubbleItems[index];
        this.class_id = activeItem.id;
        this.$nextTick(() => {
          this.title = activeItem.text;
          this.headerImg = activeItem.headerImg;
          this.handleSwitchChange();
        });

        await this.getProductList();
        console.log("选中了:", this.class_id);
      } catch (error) {
        console.error("加载失败:", error);
        // 可以添加错误提示
        uni.showToast({
          title: "加载失败",
          icon: "none",
        });
      } finally {
        // 无论成功还是失败都关闭loading
        uni.hideLoading();
      }
    },
    sortBySales(val, index) {
      if (this.activeListIndex !== index) {
        this.activeListIndex = index;
        this.isActiveUp = false;
        this.isActiveDown = false;
      }

      this.activeTab = "1";
      if (!this.isActiveUp && !this.isActiveDown) {
        this.isActiveUp = true;
        this.isActiveDown = false;
        // 升序排序
        val.goods_list = [...val.goods_list].sort(
          (a, b) => a.sell_num - b.sell_num
        );
      } else if (this.isActiveUp) {
        this.isActiveUp = false;
        this.isActiveDown = true;
        // 降序排序
        val.goods_list = [...val.goods_list].sort(
          (a, b) => b.sell_num - a.sell_num
        );
      } else {
        this.isActiveUp = false;
        this.isActiveDown = false;
        // 恢复原始顺序
      }
    },
    sortByPrice(val, index) {
      if (this.activeListIndex !== index) {
        this.activeListIndex = index;
        this.isActiveUp = false;
        this.isActiveDown = false;
      }

      this.activeTab = "2";
      if (!this.isActiveUp && !this.isActiveDown) {
        this.isActiveUp = true;
        this.isActiveDown = false;
        // 价格升序
        val.goods_list = [...val.goods_list].sort(
          (a, b) => parseFloat(a.online_price) - parseFloat(b.online_price)
        );
      } else if (this.isActiveUp) {
        this.isActiveUp = false;
        this.isActiveDown = true;
        // 价格降序
        val.goods_list = [...val.goods_list].sort(
          (a, b) => parseFloat(b.online_price) - parseFloat(a.online_price)
        );
      } else {
        this.isActiveUp = false;
        this.isActiveDown = false;
        // 恢复原始顺序
      }
    },
  },
  onPageScroll(e) {
    this.isScrolled = e.scrollTop > 20;
    console.log("page scroll:", e.scrollTop);
  },

  onLoad(options) {
    if (options.categoryData) {
      try {
        // 解析传递的数据
        const category = JSON.parse(decodeURIComponent(options.categoryData));
        console.log("接收到的完整数据:", category);

        // 确保category和title存在
        if (category && category.title) {
          const categoryName = category.title; // 使用title而不是name
          this.title = categoryName;
          console.log(categoryName, "123213123123123");

          if (category.home_flg) {
            const foundItem = this.customBubbleItems.find(
              (item) => item.id === category.id
            );
            if (foundItem) {
              this.headerImg = foundItem.headerImg;
            }
          } else {
            this.headerImg = category.headerImg;
          }

          this.class_id = category.id;
          this.getProductList();
          // 确保customBubbleItems存在且是数组
          if (Array.isArray(this.customBubbleItems)) {
            // 精确匹配类别名称
            const matchingIndex = this.customBubbleItems.findIndex(
              (item) => item && item.text && item.text === categoryName
            );

            if (matchingIndex !== -1) {
              // 找到精确匹配时设置active
              this.customBubbleItems = this.customBubbleItems.map(
                (item, index) => ({
                  ...item,
                  active: index === matchingIndex,
                })
              );
            } else {
              // 如果没有精确匹配，再尝试模糊匹配
              const fuzzyMatchIndex = this.customBubbleItems.findIndex(
                (item) =>
                  item &&
                  item.text &&
                  (item.text.includes(categoryName) ||
                    categoryName.includes(item.text))
              );

              if (fuzzyMatchIndex !== -1) {
                this.customBubbleItems = this.customBubbleItems.map(
                  (item, index) => ({
                    ...item,
                    active: index === fuzzyMatchIndex,
                  })
                );
              }
            }
          } else {
            console.warn("customBubbleItems is not an array");
          }
        } else {
          console.warn("Category or category title is missing");
        }
      } catch (error) {
        console.error("Error parsing category data:", error);
      }
    } else {
      console.warn("No category data provided");
    }
  },
};
</script>

<style lang="scss" scoped>
.navbar-icon {
  width: 174rpx;
  height: 64rpx;
  background: rgba(25, 25, 25, 0.5);
  border-radius: 32rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  margin-left: 24rpx;
}

.icon-container {
  display: flex;
  align-items: center;
  gap: 20rpx;
  padding: 0 24rpx;
}

.divider {
  width: 2rpx;
  height: 24rpx;
  background-color: rgba(255, 255, 255, 0.3);
  display: inline-block;
}

.navbar-back-icon {
  font-size: 28rpx;
  color: #fff;
  transition: color 0.3s ease;
}

.header-scroll {
  .icon-dark {
    background: rgba(255, 255, 255, 0.9);
    // border: 1rpx solid  rgba(0, 0, 0, 0.3);
    color: #000;
    .navbar-back-icon {
      color: #000;
    }
    .divider {
      background-color: rgba(0, 0, 0, 0.3);
    }
  }
}

.temperature-box {
  background-color: #c39646;
  border-radius: 16rpx 16rpx 16rpx 16rpx;
  color: #ffffff;
  font-size: 20rpx;
  margin-top: 8rpx;
  height: 28rpx;
  text-align: center;
  padding: 5rpx;
  line-height: 28rpx;
}
.scrol-content {
  height: 100vh;
  background-color: #fff;
}

.obj-product-card-content {
  background-image: url("https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/tempImage/17338836586758f70a79f24.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  display: flex;
  align-items: center;
  position: relative;
  z-index: 1;
  padding: 10px;
}

.obj-product-list {
  background: #fff;
  padding: 20rpx;
}

.obj-product-card {
  margin-bottom: 20rpx;
  background: #fff;
  margin: 10px;
  // box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
  // padding: 10px;
  // box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(0, 0, 0, 0.3);
  // flex: 1 1 calc(33.333% - 20px);
  // box-sizing: border-box;
}

.obj-product-image {
  width: 180rpx;
  height: 180rpx;
  margin: 30rpx;
  flex-shrink: 0;
}

.obj-product-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-right: 30rpx;
  height: 180rpx;
}

.obj-product-title {
  font-size: 28rpx;
  color: #333;
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  width: 100%;
  margin: 0;
  padding: 0;
}

.obj-price-area {
  display: flex;
  flex-direction: column;
  gap: 8rpx;
}

.obj-tag-container {
  margin: 0;
  .obj-tag {
    display: inline-block;
    padding: 4rpx 12rpx;
    background: #fff2e5;
    color: #c72525;
    font-size: 24rpx;
    border-radius: 4rpx;
  }
}

.obj-bottom-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.obj-price {
  display: flex;
  align-items: baseline;
  flex-direction: column;
  .obj-currency {
    font-size: 24rpx;
    color: #c72525;
    margin-right: 2rpx;
  }
  .obj-amount {
    font-size: 36rpx;
    color: #c72525;
    font-weight: bold;
  }
}

.obj-buy-button {
  background: #ff6a00;
  color: #fff;
  font-size: 26rpx;
  padding: 10rpx 32rpx;
  border-radius: 30rpx;
  border: none;
  line-height: 1.5;
  margin: 0;
  min-width: 140rpx;
  text-align: center;
}
</style>

<style lang="scss" scoped>
.fixed-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 999;
  transition: all 0.3s ease;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-color: transparent;

  .header-title {
    height: 80rpx;
    line-height: 80rpx;
    font-size: 36rpx;
    font-family: ".PingFang SC, PingFang SC";
    display: flex;
    justify-content: center;
    align-content: center;
    flex: 1;
    color: #fff;
    font-weight: 600;
    transition: color 0.3s ease;
  }

  .navbar-back-icon {
    color: #fff;
    transition: color 0.3s ease;
  }
}

.header-scroll {
  background-color: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);

  .icon-dark {
    color: #000;
  }

  .text-dark {
    color: #000 !important;
  }
}

.benner_box {
  position: relative;
  width: 100%;
  margin-top: calc(88rpx + 44px);
}
.search-box {
  height: 102rpx;
  // padding: 12rpx 24rpx;
  // box-sizing: border-box;
  // box-shadow: 0 0 16rpx rgba(0, 0, 0, 0.05);
  z-index: 1;

  .search-content {
    height: 64rpx;
    width: 448rpx;
    padding: 0 0 0 24rpx;
    border: 2rpx solid var(--primary-color);
    border-radius: 34rpx;
    box-sizing: border-box;
    background-color: #ffffff;

    .search-icon {
      font-size: 28rpx;
      color: #999999;
    }

    .search-input {
      flex: 1;
      font-size: 28rpx;
      line-height: 48rpx;
      color: #333333;
      margin: 0 10rpx;
      height: 48rpx;
    }

    .search-btn {
      width: 124rpx;
      height: 100%;
      font-size: 28rpx;
      color: #ffffff;
      text-align: center;
      line-height: 48rpx;
      // background-color: var(--primary-color);
      border-radius: 32rpx;
      margin-right: -1rpx;
    }
  }
}

.obj_bubble-outer {
  position: absolute;
  left: 40rpx;
  top: 230rpx;
  z-index: 100;
}

.obj_bubble-container {
  position: relative;
}

.obj_switch-container {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  border-radius: 10rpx;
  background-color: gray;
  width: 56rpx;
  height: 56rpx;
  margin-left: 0;
}

.obj_bubble-box {
  position: absolute;
  left: 0;
  top: 70rpx;
  width: 100%;
}

.obj_bubble-content {
  background: #fff;
  border-radius: 16rpx;
  padding: 20rpx;
  margin: 0;
  position: absolute;
  left: 0;
  top: 0;
  min-width: 500rpx;
  box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.12);
  transform-origin: top left;
  transform: scale(0.5);
  opacity: 0;

  &::before {
    content: "";
    position: absolute;
    top: -12rpx;
    left: 20rpx;
    border-left: 12rpx solid transparent;
    border-right: 12rpx solid transparent;
    border-bottom: 12rpx solid #fff;
    filter: drop-shadow(0 -2rpx 2rpx rgba(0, 0, 0, 0.08));
  }
}

.obj_bubble-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20rpx;
  width: 100%;
}

.obj_bubble-item {
  height: 64rpx;
  width: auto;
  min-width: 250rpx;
  padding: 0 30rpx;
  background-color: #f5f5f5;
  border-radius: 40rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28rpx;
  color: #333;
  transition: all 0.3s;
}

.obj_bubble-active {
  background: #8b5e3c;
  color: #fff;
}

@keyframes bubbleIn {
  from {
    transform: translateY(-20rpx) scale(0.5);
    opacity: 0;
  }
  to {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}

@keyframes bubbleOut {
  from {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
  to {
    transform: translateY(-20rpx) scale(0.5);
    opacity: 0;
  }
}

.obj_bubble-animated {
  animation: bubbleIn 0.3s ease forwards;
}

.obj_bubble-slide-out {
  animation: bubbleOut 0.3s ease forwards;
}

.obj_bubble-close-img {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 56rpx;
  height: 56rpx;
  transition: transform 0.3s ease;
  transform: rotate(0deg);

  &.active {
    transform: rotate(180deg);
  }
}
.gift-container {
  display: flex;
  flex-direction: column;
  margin-top: 30rpx;
}

.gift-container-one {
  display: flex;
  flex-direction: column;
  padding-bottom: env(safe-area-inset-bottom);
}

.gift-item {
  position: relative;
}

.gift-title-box {
  // height: 74rpx;
  position: relative;
  z-index: 20;
  margin-top: 50rpx;
}

.gift-title-img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 74rpx;
  width: 500rpx;
}

.gift-title-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 40rpx;
  color: #e0b879;
  font-weight: 600;
}

.gift-content-box {
  width: 100%;
  position: relative;
  top: -35rpx;
}

.gift-content-box-one {
  width: 100%;
  position: relative;
  top: 0rpx;
}

.gift-content-box-one-item {
  border: 4rpx solid #e0b879;
  border-radius: 16rpx;

  // background-image: url("https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/tempImage/17338996296759356d99fb3.png");
  // background-size: 100% 100%;
  // background-repeat: no-repeat;
  // background-position: top;
  margin: 20rpx;
}

.options {
  display: flex;
  justify-content: center;
  gap: 200rpx;
  width: 100%;
  margin: 20rpx auto;
  padding: 20rpx;
  border-radius: 10rpx;
}

.option {
  font-size: 28rpx;
  color: #333;
  text-align: center;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10rpx 20rpx;
  transition: color 0.3s;
  position: relative;
}

.option.active {
  color: black;
}

.triangle-icons {
  display: flex;
  flex-direction: column;
  margin-left: 3px;
  gap: 2px;
}

.triangle-icon {
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
}

.triangle-icon-up {
  border-bottom: 5px solid #d8d8d8;
}

.triangle-icon-down {
  border-top: 5px solid #d8d8d8;
}

.triangle-icon-up.active {
  border-bottom-color: black;
}

.triangle-icon-down.active {
  border-top-color: black;
}
</style>

<style scoped>
.series-product-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

.series-product-card {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.series-product-image {
  width: 240rpx;
  height: 240rpx;
  object-fit: cover;
  margin-bottom: 10rpx;
}

.series-product-info {
  width: 80%;
  display: flex;
  align-content: center;
  flex-direction: column;
  margin-top: 20rpx;
}

.series-product-title {
  font-size: 28rpx;
  color: #333;
  margin-bottom: 10rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}

.series-price-area {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 14rpx 0;
  width: 100%;
}

.series-price {
  display: flex;
  align-items: baseline;
  flex-direction: column;
}

.series-currency {
  font-size: 24rpx;
  color: #c72525;
}

.series-amount {
  font-size: 32rpx;
  color: #c72525;
  font-weight: bold;
}

.series-cart-icon {
  width: 48rpx;
  height: 48rpx;
}
</style>
